<script setup lang="ts">
import TCard from '@/components/card/index.vue'
import sysMonitorApi from './api/SysMonitorApi';
import {useChart} from "@/view/sys/monitor/composable/useChart.ts";
import {useData} from "@/view/sys/monitor/composable/useData.ts";
import type GcResultResp from "@/view/sys/monitor/type/resp/GcResultResp.ts";
import {ref} from "vue";
import {Message} from "@/hook/message/message.ts";

useChart()

const {
  operateSystemBasic,
  diskInfo,
  jvmArg,
  jvmBasic,
  jvmRealtime,
  threads,
  databaseInfo,
  getUsageColor,
  diskUsageChart,
  heapMemoryGaugeChart,
  operateSystemRealtimeChart,
  jvmRealtimeChart,
} = useData()

const getJvmArgType = (arg: string): 'primary' | 'success' | 'warning' | 'danger' | 'info' => {
  // 内存相关参数
  if (arg.startsWith('-Xm') || arg.includes('Memory') || arg.includes('memory')) {
    return 'primary'
  }

  // GC相关参数
  if (arg.includes('GC') || arg.includes('gc') || arg.startsWith('-XX:+Use') || arg.includes('Collector')) {
    return 'warning'
  }

  // Spring/应用配置
  if (arg.includes('spring') || arg.includes('Spring') || arg.includes('application')) {
    return 'success'
  }

  // 系统属性
  if (arg.startsWith('-D')) {
    return 'info'
  }

  // JVM调试/监控参数 - 红色
  if (arg.includes('debug') || arg.includes('jmx') || arg.includes('management') || arg.includes('agent')) {
    return 'danger'
  }

  // 默认 - 蓝色
  return 'primary'
}

/**
 * 强制GC
 */
const gcLoading = ref(false)
const forceGc = async () => {
  gcLoading.value = true
  const gcResultResp: GcResultResp = await sysMonitorApi.doGc()
  console.log(gcResultResp)
  Message.success(`耗时: ${gcResultResp.duration}ms, 内存释放: ${gcResultResp.memoryReleasedMB}MB`)
  gcLoading.value = false
}

</script>

<template>
  <!-- 操作系统基本指标 -->
  <div class="monitor-section">
    <h2 class="section-title">操作系统基本信息</h2>
    <t-card class="info-card" height="80px">
      <template v-if="operateSystemBasic">
        <span class="info-icon">🖥️</span>
        <span class="info-content">
          <span class="info-title">设备名称</span>
          <span class="info-value">{{ operateSystemBasic.hostName }} </span>
        </span>
      </template>
    </t-card>

    <t-card class="info-card" height="80px">
      <template v-if="operateSystemBasic">
        <span class="info-icon">⚙️️</span>
        <span class="info-content">
          <span class="info-title">操作系统</span>
          <span class="info-value">{{ operateSystemBasic.osName }} {{ operateSystemBasic.osVersion }}</span>
          <span class="info-title">系统架构: {{ operateSystemBasic.osArch }}</span>
          <span class="info-title">发行商: {{ operateSystemBasic.osManufacturer }}</span>
        </span>
      </template>
    </t-card>

    <t-card class="info-card" height="80px">
      <template v-if="operateSystemBasic">
        <span class="info-icon">🔲</span>
        <span class="info-content">
          <span class="info-title">CPU信息</span>
          <span class="info-value">{{ operateSystemBasic.cpuName }} </span>
          <span class="info-title">CPU核心数: {{ operateSystemBasic.cpuPhysicalCores }} </span>
          <span class="info-title">CPU线程数: {{ operateSystemBasic.cpuLogicalCores }} </span>
          <span class="info-title">CPU主频: {{ operateSystemBasic.cpuMaxFreqGHz }} </span>
          <span class="info-title">CPU架构: {{ operateSystemBasic.cpuArch }} </span>
        </span>
      </template>
    </t-card>

    <t-card class="info-card" height="80px">
      <template v-if="operateSystemBasic">
        <span class="info-icon">💾</span>
        <span class="info-content">
          <span class="info-title">物理内存</span>
          <span class="info-value">{{ operateSystemBasic.totalPhysicalMemory }} </span>
        </span>
      </template>
    </t-card>

  </div>

  <!-- 操作系统实时指标趋势图 -->
  <div class="monitor-section">
    <h2 class="section-title">操作系统实时指标趋势图</h2>
    <t-card class="operate-system-realtime-card" height="400px">
      <v-chart
          v-if="operateSystemRealtimeChart"
          :option="operateSystemRealtimeChart"
          :update-options="{ notMerge: false, lazyUpdate: true }"
          style="height: 350px;"
          autoresize/>
    </t-card>
  </div>

  <!-- 操作系统磁盘使用情况图表 -->
  <div class="monitor-section">
    <h2 class="section-title">磁盘使用情况</h2>
    <t-card class="operate-system-realtime-card" height="400px">
      <v-chart
          v-if="diskUsageChart"
          :option="diskUsageChart"
          :update-options="{ notMerge: false, lazyUpdate: true }"
          style="height: 350px;"
          autoresize/>
    </t-card>
  </div>

  <!-- JVM基本信息 -->
  <div class="monitor-section">
    <h2 class="section-title">JVM基本信息</h2>
    <t-card class="info-card" height="80px">
      <template v-if="jvmBasic">
        <span class="info-icon">☕</span>
        <span class="info-content">
          <span class="info-title">Java版本</span>
          <span class="info-value">{{ jvmBasic.version }}</span>

          <span class="info-title">JVM名称: {{ jvmBasic.jvmName }}</span>
          <span class="info-title">Java厂商: {{ jvmBasic.vendor }}</span>
        </span>
      </template>
    </t-card>

    <t-card class="info-card" height="80px">
      <template v-if="jvmBasic">
        <span class="info-icon">🚀</span>
        <span class="info-content">
        <span class="info-title">进程信息</span>
        <span class="info-value">PID: {{ jvmBasic.pid }}</span>
        <span class="info-title">启动时间: {{ jvmBasic.startTime }}</span>
        <span class="info-title">工作目录: {{ jvmBasic.workingDirectory }}</span>
        <span class="info-title">用户名: {{ jvmBasic.username }}</span>
      </span>
      </template>
    </t-card>

    <t-card class="info-card" height="80px">
      <template v-if="jvmBasic">
        <span class="info-icon">💾</span>
        <span class="info-content">
        <span class="info-title">内存配置</span>
        <span class="info-value">初始堆内存: {{ jvmBasic.initHeapMemory ?? '-' }} </span>
        <span class="info-value">最大堆内存: {{ jvmBasic.maxHeapMemory ?? '-' }}</span>
        <span class="info-title">初始非堆内存: {{ jvmBasic.initNonHeapMemory ?? '-' }}</span>
        <span class="info-title">最大非堆内存: {{ jvmBasic.maxNonHeapMemory ?? '-' }}</span>
        <span class="info-title">直接内存: {{ jvmBasic.maxDirectMemory ?? '-' }}</span>
      </span>
      </template>
    </t-card>
  </div>

  <!-- JVM最新数据 -->
  <div class="monitor-section">
    <h2 class="section-title">JVM实时数据</h2>
    <t-card class="info-card" height="80px">
      <template v-if="jvmRealtime">
        <span class="info-icon">☕</span>
        <span class="info-content">
          <span class="info-title">已提交堆内存</span>
          <span class="info-value">{{ jvmRealtime.committedHeapMemoryStr }}</span>
          <span class="info-title">已使用堆内存</span>
          <span class="info-value" :style="{color: getUsageColor(jvmRealtime.heapMemoryUsageRate)}">
            {{ jvmRealtime.usedHeapMemoryStr }}
          </span>
          <span class="info-title">堆内存使用率</span>
          <span class="info-value" :style="{color: getUsageColor(jvmRealtime.heapMemoryUsageRate)}">
            {{ Number(jvmRealtime.heapMemoryUsageRate * 100).toFixed(1) }}%
          </span>
          <br/>
          <span class="info-title">已提交非堆内存</span>
          <span class="info-value">{{ jvmRealtime.committedNonHeapMemoryStr }}</span>
          <span class="info-title">已使用非堆内存</span>
          <span class="info-value" :style="{color: getUsageColor(jvmRealtime.nonHeapMemoryUsageRate)}">
            {{ jvmRealtime.usedNonHeapMemoryStr }}
          </span>
          <span class="info-title">非堆内存使用率</span>
          <span class="info-value" :style="{color: getUsageColor(jvmRealtime.nonHeapMemoryUsageRate)}">
            {{ Number(jvmRealtime.nonHeapMemoryUsageRate * 100).toFixed(1) }}%
          </span>
        </span>

        <!-- 堆内存使用驾驶舱 -->
        <span class="info-gauge">
          <v-chart
              v-if="heapMemoryGaugeChart"
              :option="heapMemoryGaugeChart"
              :update-options="{ notMerge: false, lazyUpdate: true }"
              style="height: 250px;"
              autoresize
          />
          <t-btn ghost @click="forceGc" :loading="gcLoading">强制GC</t-btn>
        </span>

      </template>
    </t-card>
  </div>

  <!-- JVM实时指标趋势图 -->
  <div class="monitor-section">
    <h2 class="section-title">JVM实时指标趋势图</h2>
    <t-card class="operate-system-realtime-card" height="400px">
      <v-chart
          v-if="jvmRealtimeChart"
          :option="jvmRealtimeChart"
          :update-options="{ notMerge: false, lazyUpdate: true }"
          style="height: 350px;"
          autoresize/>
    </t-card>
  </div>

  <!-- JVM启动参数信息 -->
  <div class="monitor-section">
    <h2 class="section-title">JVM启动参数</h2>
    <!-- JVM输入参数 -->
    <t-card class="info-card" height="auto">
      <template v-if="jvmArg">
        <span class="info-icon">🚀</span>
        <span class="info-content startup-params-content">
        <span class="info-title">全部参数</span>
        <div class="info-jvm-arg">
          <t-tag v-for="arg in jvmArg.allArguments" :key="arg" :label="arg" :type="getJvmArgType(arg)"/>
        </div>
      </span>
      </template>
    </t-card>
  </div>

  <!-- JVM线程信息 -->
  <div class="monitor-section">
    <h2 class="section-title">线程信息</h2>
    <t-card class="info-card" height="80px">
      <template v-if="jvmRealtime">
        <span class="info-icon">⚡️</span>
        <span class="info-content">
          <span class="info-title">峰值线程数</span>
          <span class="info-value"> {{ threads?.peakThreads }} </span>
          <span class="info-title">当前线程总数</span>
          <span class="info-value">{{ threads?.totalThreads }}</span>
          <span class="info-title">活跃线程数</span>
          <span class="info-value"> {{ threads?.activeThreads }} </span>
          <span class="info-title">守护线程数</span>
          <span class="info-value"> {{ threads?.daemonThreads }} </span>
      </span>
      </template>
    </t-card>
  </div>

  <!-- JVM数据库连接池信息 -->
  <div class="monitor-section">
    <h2 class="section-title">数据库连接池信息</h2>
    <t-card class="info-card" height="80px">
      <template v-if="databaseInfo">
        <span class="info-icon">🗄️</span>
        <span class="info-content">
          <span class="info-title">连接池类型</span>
          <span class="info-value"> {{ databaseInfo?.dataSourceClass }} </span>
          <span class="info-title">最大连接数</span>
          <span class="info-value">{{ databaseInfo?.maxConnections }}</span>
          <span class="info-title">最小连接数</span>
          <span class="info-value"> {{ databaseInfo?.minConnections }} </span>
          <span class="info-title">活跃连接数</span>
          <span class="info-value"> {{ databaseInfo?.activeConnections }} </span>
          <span class="info-title">空闲连接数</span>
          <span class="info-value"> {{ databaseInfo?.idleConnections }} </span>
      </span>
      </template>
    </t-card>
  </div>
</template>

<style scoped>

.monitor-section {
  width: 100%;
  margin: 15px 0;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
  padding-left: 12px;
  border-left: 4px solid #1890ff;
}

.info-card {
  display: flex;
  justify-content: left;
  gap: 26px;
  margin-bottom: 16px;
}

.info-icon {
  font-size: 28px;
}

.info-content {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.info-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.info-value {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.info-gauge {
  width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info-jvm-arg {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
</style>